<template>
  <el-row>
    <el-form :model="form" ref="ruleFormRef" :rules="rules">
      <el-form-item label="name" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="pass" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="onSubmit(ruleFormRef)"
          >login</el-button
        >
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { useLogin } from '@/composables/useManager'

// composition-api
const { form, loading, ruleFormRef, rules, onSubmit } = useLogin()

function keyUp(e) {
  if (e.key == 'Enter') onSubmit(ruleFormRef.value)
}

onMounted(() => {
  document.addEventListener('keyup', keyUp)
})

onBeforeUnmount(() => {
  document.removeEventListener('keyup', keyUp)
})
</script>
